<template>
    <div class="header">
        <div class="headLeft">
            <span class="iconfont iconfanhui"></span>
        </div>
        <div class="headInput">
            <span class="iconfont iconsousuo"></span>
        </div>
        <router-link to="/city">
          <div class="headRight">
            <span class="city">{{city}}</span>
            <span class="iconfont iconjiantouarrow486"></span>
          </div>
        </router-link>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
    computed:{
      ...mapGetters([
        'city'
      ])
    }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
    .header
      display flex
      color #fff
      height .86rem
      line-height .86rem
      background-color $bgColor
      justify-content space-between
      .headLeft
        width 0.64rem  
        .iconfanhui
          display block  
          text-align center
          font-size .4rem
      .headInput
        padding-left .3rem  
        flex 1
        background #fff;
        border-radius 0.1rem
        margin-top 0.12rem
        line-height .64rem
        height .64rem
        margin-left .2rem
        color #fff
        .iconsousuo
          color #000  
      .headRight
        font-size 0
        width 1.24rem 
        text-align center 
        color #fff
        .city
          font-size .3rem        
          
</style>